<template>
	<view>
		<view class="xing">
			<view class="xing_k" v-for="(a,b) in content" :key="b">
				<view class="x_title">{{a.name}}：</view>
				<view class="x_img">
					<view class="ping" >
						<view class="zheng_xin" v-for="(row,index) in a.hui" @click="dian(b,index)" :key="index">
							<image class="img" src="../xin.png" v-if="a.zheng-0.5>index" />
							<image class="img" src="../b_xin.png" v-if="a.ban && a.zheng>index"/>
							<image class="img" src="../h_xin.png" v-if="a.zheng<=index"/>
						</view>
					</view>
				</view>
				<view class="x_fen">{{a.zheng}}分</view>
			</view>
		</view>
		<view class="content">
			<view class="title">点评内容：</view>
			<view class="pingtext"><textarea placeholder="请输入你对该用户的第一印象..." v-model="ping"></textarea></view>
		</view>
		<view class="btn" @click="tijiao()">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ping:'',
				content:[
					{name:'性格',hui:5,zheng:'0',ban:'false',sum:0},
					{name:'相貌',hui:5,zheng:'0',ban:'false',sum:0},
					{name:'学历',hui:5,zheng:'0',ban:'false',sum:0},
					{name:'身高',hui:5,zheng:'0',ban:'false',sum:0}
				],
				id:''
			}
		},
		
		methods: {
			dian(b,e){
				var that=this
				var a=e++
				that.content[b].sum++
				console.log(that.content[b].sum,22)
				if(that.content[b].sum==1){
					that.content[b].zheng=e-0.5
					that.content[b].ban=true
					that.content[b].sum=-1
				}else{
					that.content[b].ban=false
					that.content[b].zheng=e++
				}
			},
			
		}
	}
</script>

<style>
/* 点评星级 */
.xing{
	width: 100%;
	height:350upx;
	padding: 25upx;
	box-sizing: border-box;
	overflow: hidden;
}
.xing_k{
	width: 100%;
	line-height:80upx;
}
.x_title{
	float: left;
}
.x_img{
	/* width: 250upx; */
	height: 30upx;
	max-width:80%;
	float: left;
}
.ping{
	/* width: 150upx; */
	height: 30upx;
	float: left;
}
.zheng_xin{
	width: 30upx;
	height: 30upx;
	margin: 10upx;
	float: left;
}
.ban_xin{
	width: 30upx;
	height: 30upx;
	margin: 10upx;
	float: left;
}
.img{
	width: 100%;
	height: 100%;
}
/* 点评内容 */
.content{
	padding: 20upx;
}
.title{
	line-height: 100upx;
}
.pingtext{
	margin: 0 auto;
	width: 90%;
	border-radius: 10upx;
	padding: 20upx;
	background: #f5f5f5;
}
.btn{
	width:60% ;
	height: 100upx;
	margin: 100upx auto;
	background: linear-gradient(to left,#68aef9,#8a96fc);
	border-radius:50upx;
	color: #FFFFFF;
	line-height: 100upx;
	text-align: center;
}
</style>
